<template>
  <div class="">
    <!-- 仪表盘 -->
    <ve-gauge :data="gaugeChartData" :settings="chartSettings" height="270px" :extend="gaugeExtend"></ve-gauge>
  </div>

</template>
<script>
  export default {
    name: 'gaugeChart',
    props:['value','subtext'],
    data () {
      this.chartSettings = {
        //dimension: 'type',
        //metrics: 'value',
        labelMap: {
          'fuzailv': '负载率'
        },
        dataType: {
          'fuzailv': 'percent'
        },
        seriesMap: {
          'fuzailv': {
            min: 0,
            max: 1,
            axisLine: {
              lineStyle: {
                color: [[0.2, '#91c7ae'],[1, '#CBCBCB']],
                width:0,
              }
            },
            axisLabel: {
              show:false,
              textStyle: {
                color: '#333',
              }
            },
            axisTick: {
              length:20,
              lineStyle: {
                //color: '#28d4ff',
              },
            },
            splitLine: {
              length:30,
              lineStyle: {
                //color: '#28d4ff',
              },
            },
            
            detail: {
              offsetCenter: [0, '50%'],
              textStyle: {
                color: '#fff',
                fontSize:35,
              }
            },
            pointer:{
              show:false,
            },
          }
        },
      };
      this.gaugeExtend={
        title: {
          itemGap:51,
          left:'center',
          bottom:'35px',
          text: '负载率',
          textStyle: {
            color: '#a9aeb5',
            fontSize:13,
          },
          subtext:this.subtext,
          subtextStyle: {
            color: '#fff',
            fontSize:18,
          }
        },
      };
      var gaugeValue=this.value;
      return {
        gaugeChartData: {
          columns: ['type', 'value'],
          rows: [
            { type: 'fuzailv', value: gaugeValue }
          ]
        },
      }
    },
    created () {
      
    },
    
    methods: {

    }
  }
</script>
<style scoped>
</style>
